Project Requirements
• Create a single-page website with semantic HTML, appropriate CSS (not responsive), and JS.
• All code must be written from scratch; no copying from the internet.
• The site should display properly at 1280px wide (fixed).
• The website should resemble a real, stand-alone professional website.
• Implement light and dark mode functionality for the site.
• Include a contact form with fields for full name, phone number, email address, comments, and a radio set for contact preference.
• Form validation for required fields (name and comments) and contact preference.
• Properly organize, indent, comment, and validate HTML and CSS files.
• No JavaScript or CSS should be inline; keep them in separate files.
• Ensure no errors are visible in the browser console.
• Use the async or defer attribute for the script tag in the header.
• Globally use "use strict" in your JavaScript code.
What the requirements inspired you to create
After reviewing the requirements, I really wanted to create something that doesn't exist to give myself the creative challenge! I've been delving deep into consoles in my childhood lately, and ended up choosing "Wii Sport Resort".
An explanation of the goals/purpose/users of the site
I decided to create a website where the Wuhu island exist from the game Wii Sport Resort! I thought it'd be fun to create a website where users can learn more about the Wuhu island and entice them to visit. Similar to state websites, such as gohawaii.com or bali.com, I wanted to showcase what Wuhu had to offer for tourist planning to visit, purchase merchandise to directly support island efforts, and contact them directly if they had any questions/concerns.
Steps to Build Website
I first started with the HTML, creating a frame for the whole website. I didn't want the framing to be too complicated, so I took my time implementing information that I thought was necessary. After completing the HTML, I moved on to the CSS. After some research, I was able to find color palettes and designs directly from the video game I wanted to be similar to the website! Lastly, after completing the CSS, I moved towards the Javascript. I had trouble when trying to make the 'dark mode' work, but was able to get a crack at it. Little did I know, the contact validation and shopping Javascript was going to be more difficult. Overall, the experience was beneficial and I was able to create the website I wanted!
Sources of Images
The SVGs or icons I used in each section came from: https://iconoir.com/ they provide open source icons. For images from Wii Sports Resort, I got all from: https://wiisports.fandom.com/wiki/Wii_Sports_Resort. Lastly, the images on the product section is actually AI created! I utilized Bing's AI generator at: https://www.bing.com/create to create the images.
